.roll-captions {
    position: absolute;
    bottom: 80px;
    width: 100%;
    height: 200px;
    // background: rgba(255, 255, 255, 0.8);
    // backdrop-filter: blur(2px);
    border-radius: 12px;
    // border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    z-index: 10;

    .captions-container {
        height: 100%;
        overflow-y: auto;
        padding: 16px;
        scroll-behavior: smooth;

        &::-webkit-scrollbar {
            width: 4px;
        }

        &::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 2px;
        }

        &::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 2px;
        }

        &::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.5);
        }
    }

    .conversation-group {
        margin-bottom: 20px;
        opacity: 1;
        transform: translateY(0);
        transition: all 0.3s ease-in-out;

        &.current {
            animation: slideInUp 0.3s ease-out;
        }

        &.history {
            opacity: 0.8;
            transform: translateY(-5px);
            transition: all 0.3s ease-in-out;
        }

        &:last-child {
            margin-bottom: 0;
        }
    }

    .message {
        display: flex;
        margin-bottom: 12px;
        animation: messageSlideIn 0.3s ease-out;

        &.user {
            justify-content: flex-end;
        }

        &.ai {
            justify-content: flex-start;
        }

        &.current {
            animation: messageSlideIn 0.3s ease-out;
        }

        .message-bubble {
            max-width: 80%;
            position: relative;
        }

        .message-content {
            padding: 8px 12px;
            border-radius: 18px;
            word-wrap: break-word;
            font-size: 13px;
            line-height: 1.4;
            position: relative;

            &::after {
                content: '';
                position: absolute;
                width: 0;
                height: 0;
                border-style: solid;
            }
        }

        .message-time {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.6);
            text-align: center;
            margin-top: 4px;
            opacity: 0;
            transition: opacity 0.2s ease;
            color: #282828;
        }

        &:hover .message-time {
            opacity: 1;
        }

        &.user {
            .message-content {
                background: linear-gradient(135deg, #007AFF, #5AC8FA);
                color: white;
                margin-left: auto;

                &::after {
                    right: -8px;
                    top: 50%;
                    transform: translateY(-50%);
                    border-width: 8px 0 8px 8px;
                    border-color: transparent transparent transparent #5AC8FA;
                }
            }
        }

        &.ai {
            .message-content {
                background: rgba(198, 198, 198, 0.9);
                color: #282828;
                margin-right: auto;

                &::after {
                    left: -8px;
                    top: 50%;
                    transform: translateY(-50%);
                    border-width: 8px 8px 8px 0;
                    border-color: transparent rgba(198, 198, 198, 0.9) transparent transparent;
                }
            }
        }
    }

    .streaming-indicator {
        display: inline-flex;
        align-items: center;
        margin-left: 8px;
        gap: 2px;

        .dot {
            width: 4px;
            height: 4px;
            background: currentColor;
            border-radius: 50%;
            animation: streamingDot 1.4s infinite ease-in-out both;

            &:nth-child(1) {
                animation-delay: -0.32s;
            }

            &:nth-child(2) {
                animation-delay: -0.16s;
            }

            &:nth-child(3) {
                animation-delay: 0s;
            }
        }
    }

    .typewriter-cursor {
        display: inline-block;
        animation: typewriterBlink 1s infinite;
        font-weight: bold;
        color: rgb(155, 155, 155);
        margin-left: 1px;
    }

    .conversations-history {
        .conversation-group {
            opacity: 0.7;
            transition: opacity 0.3s ease;

            &:hover {
                opacity: 1;
            }
        }
    }

    .current-conversation {
        .conversation-group {
            opacity: 1;

            .message {
                &.ai .message-content {
                    animation: aiMessageTyping 0.5s ease-out;
                }
            }
        }
    }
}

// 动画定义
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes aiMessageTyping {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes streamingDot {

    0%,
    80%,
    100% {
        transform: scale(0);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes typewriterBlink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}